<template>
  <div class="rightview">
    <div class="rightTitle">
      智能巡查情况
    </div>
    <div>
      <div class="imgList" v-for="(item,index) in imgList">
        <img :src="require('../../assets/img/ic'+(Math.floor(Math.random() * 12) + 1)+'.png')">
        <!-- <p style="color: #FFFFFF;">{{item.Num}}</p> -->
         <p v-show="numShow"><countTo :startVal='0' separator='' :endVal='item.Num' :duration='3000'></countTo></p>
        <a>{{item.Result}}</a>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    PlatformIssues
  } from "../../request/api"
  import countTo from 'vue-count-to';
  export default {
    data() {
      return {
        imgList: 11,
        numShow:false
      };
    },
    components: {
      countTo
    },
    created() {
      this.GetPlatformIssues()
    },
    methods: {
      GetPlatformIssues() {
        PlatformIssues({
          code: 'all',
          AppId: this.$getParams('appid'),
          EBCOrganizationId: '',
          UserId: this.$getParams('userid')
        }).then((res) => {
          console.log(res)
          setTimeout(()=>{
            this.imgList = res.SCater.Data.PlatformIssues_A;
            console.log(this.imgList)
            let arr2 = [
              {Num:23,Result:"卫生环境欠佳"},
              {Num:12,Result:"砧板混用"},
              {Num:48,Result:"无健康证人员"},
              {Num:15,Result:"挡鼠板移位"},
              {Num:9,Result:"嬉笑打闹"}
            ]
            this.imgList = this.imgList.concat(arr2)
            this.numShow = true
          },10)
        })
      }
    }
  };
</script>

<style>
  .rightview {
    position: absolute;
    right: 3px;
    width: 330px;

  }

  .imgList {
   width: 138px;
   height: 80px;
    float: left;
    position: relative;
  }
.imgList img{
  width: 138px;
  height: 80px;
}
  .imgList p {
    position: absolute;
    top: 16px;
    display: block;
    width: 93%;
    text-align: center;
    font-size: 25px;
    color: #FFFFFF;
  }

  .imgList a {
    position: absolute;
    top: 50px;
    left: -4px;
    width: 100%;
    color: #ffffff;
    text-align: center;
    font-size: 17px;
  }

  .rightTitle {
    wdith: 298px;
    height: 43px;
    color: hsla(181, 100%, 53%, 1);
    text-align: left;
    padding-left: 20px;
    line-height: 43px;
    background: url(../../assets/img/titleb.png) no-repeat;
  }
</style>
